<template>
  <h1>我们的第一个Vue组件!</h1>
  <span>{{info}}</span>
  <h4>没有什么事情能阻挡我{{info}}</h4>
  {{info+'???'}}
  <br>
  <button @click="f()">按钮</button>
  <h1>El-按钮组件</h1>
  <el-button>默认按钮</el-button>
  <el-icon><CirclePlus /></el-icon>
  <hr>
  <el-icon><Hide /></el-icon>
  <hr>
  <el-switch v-model="value1" />
  <el-switch
      v-model="value2"
      class="ml-2"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
  />

</template>

<script setup>
import {ref} from "vue";

const info = ref("走自己的路，看自己的风景,不念过往,不惧将来，只争当下");

const f =()=>{
  console.log("info.value");

}


const value1 = ref(true)
const value2 = ref(true)
</script>


<style scoped>

</style>